*{
	margin: 0;
	padding: 0;
}
body {
	background: url(images/beijing.jpg) no-repeat;
	background-size: cover;
	overflow: hidden;
}
.top {
	width: 400px;
	height: 100px;
	margin: 60px auto;
	color: #fff;
	font-size: 30px;
}
.box {
	width: 310px;
	height: 310px;
	margin: auto;
	perspective: 800px;/*景深*/
}
.box .pic {
	position: relative;
	transform-style: preserve-3d;/*3d环境*/
	animation: play 10s linear infinite;/*动画名称 执行时间 匀速 无限执行*/
}
.box ul li {
	list-style: none;
	position: absolute;
	top: 0;
	left: 0;
}
.text {
	width: 500px;
	height: 200px;
	color: #6fade1;
	font-size: 24px;
	margin: 0 auto;
}
@keyframes play {
	from{
		transform: rotateY(0deg);
	}
	to {
		transform: rotateY(360deg);
	}
}
@media (max-width: 414px){
	.top {
		width: 375px;
		height: 100px;
		margin: 60px auto;
		color: #fff;
		font-size: 24px;
	}
	.text {
		width: 300px;
		height: 200px;
		font-size: 16px;
	}
}